.cm-animation
  animation-duration 0.3s
  animation-timing-function ease-out
  animation-fill-mode both
  
  /* 动画持续时间 100ms - 5000ms */
  for i in 1 2 3 4 5 6 7 8 9 10 15 20 25 30 35 40 45 50
    &.d-{i}
      animation-duration 0.1s * i
  
  /* 动画名称 */
  &.slide-top-in
    animation-name slide-top-in
  &.slide-top-out
    animation-name slide-top-out
  &.slide-bottom-in
    animation-name slide-bottom-in
  &.slide-bottom-out
    animation-name slide-bottom-out
  &.slide-left-in
    animation-name slide-left-in
  &.slide-left-out
    animation-name slide-left-out
  &.slide-right-in
    animation-name slide-right-in
  &.slide-right-out
    animation-name slide-right-out
  &.fade-in
    animation-name fade-in
  &.fade-out
    animation-name fade-out
  &.zoom-in
    animation-name zoom-in
  &.zoom-out
    animation-name zoom-out
    
  /* 动画过渡曲线 */
  &.linear
    animation-timing-function linear
  &.ease
    animation-timing-function ease
  &.ease-in
    animation-timing-function ease-in
  &.ease-in-out
    animation-timing-function ease-in-out

/* 上滑 */
@keyframes slide-top-in
  0%
    transform translateY(-100%)
  100%
    transform translateY(0)
@keyframes slide-top-out
  0%
    transform translateY(0)
  100%
    transform translateY(-100%)

/* 下滑 */
@keyframes slide-bottom-in
  0%
    transform translateY(100%)
  100%
    transform translateY(0)
@keyframes slide-bottom-out
  0%
    transform translateY(0)
  100%
    transform translateY(100%)
    
/* 左滑 */
@keyframes slide-left-in
  0%
    transform translateX(-100%)
  100%
    transform translateX(0)
@keyframes slide-left-out
  0%
    transform translateX(0)
  100%
    transform translateX(-100%)

/* 右滑 */
@keyframes slide-right-in
  0%
    transform translateX(100%)
  100%
    transform translateX(0)
@keyframes slide-right-out
  0%
    transform translateX(0)
  100%
    transform translateX(100%)

/* 淡入淡出 */
@keyframes fade-in
  0%
    opacity 0
  100%
    opacity 1
@keyframes fade-out
  0%
    opacity 1
  100%
    opacity 0

/* 放大缩小 */
@keyframes zoom-in
  0%
    transform scale(0)
  100%
    transform scale(1)
@keyframes zoom-out
  0%
    transform scale(1)
  100%
    transform scale(0)